<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { get_GPARanking } from '../../../../api/api';

const props = defineProps({
  selectedStudentId: {
    type: Number,
    required: false,
    default: 1,
  },
});

// 监听 selectedStudentId 的变化并调用 fetchData
watch(() => props.selectedStudentId, (newValue) => {
  if (newValue) {
    fetchData(newValue); // 传递 newValue 到 fetchData
  }
});

// 获取 token
const getToken = () => {
  return localStorage.getItem('pz_token');
};

// 请求数据并更新状态
const fetchData = async (StudentID) => {
  try {
    const token = getToken();

    if (!token) {
      console.error('未找到 Token');
      return;
    }

    if (!StudentID) {
      console.error('无效的 StudentID:', StudentID);
      return;
    }

    // 设置请求头
    const headers = {
      'Authorization': `JWT ${token}`, // 将 token 作为 Bearer Token 传递
    };

    const response = await get_GPARanking(StudentID, headers);

    // console.log('response:', response);

    const GPARanking = response.data.data.data; // 这里获取实际的返回数据

    // console.log('GPARanking:', GPARanking);  // 打印 Data 的结构

    // 从 sourseNumberData 中提取学年和门数数据
    const AcademicYear = GPARanking.map(item => "第" + item.AcademicYear + "学期");
    const ClassRank = GPARanking.map(item => item.ClassRank);
    const MajorRank = GPARanking.map(item => item.MajorRank);

    // 更新 ECharts 的配置
    option.xAxis[0].data = AcademicYear;
    option.series[0].data = ClassRank;
    option.series[1].data = MajorRank;

    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const chart = ref();
// 配置 ECharts 的选项

const option = reactive({
  // 通过这个color修改两条线的颜色
  color: ["#00f2f1", "#ed3f35"],
  tooltip: {
    trigger: "axis"
  },
  legend: {
    // 如果series 对象有name 值，则 legend可以不用写data
    // 修改图例组件 文字颜色
    textStyle: {
      color: "#4c9bfd"
    },
    // 这个10% 必须加引号
    right: "10%"
  },
  grid: {
    top: "20%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    show: true, // 显示边框
    borderColor: "#012f4a", // 边框颜色
    containLabel: true // 包含刻度文字在内
  },

  xAxis: [{
    type: "category",
    boundaryGap: false,
    data: ["大一上", "大一下", "大二上", "大二下", "大三上", "大三下", "大四上", "大四下"],
    axisTick: {
      show: false // 去除刻度线
    },
    axisLabel: {
      color: "#4c9bfd" // 文本颜色
    },
    axisLine: {
      show: false // 去除轴线
    }
  }],
  yAxis: [{
    type: "value",
    axisTick: {
      show: false // 去除刻度线
    },
    axisLabel: {
      color: "#4c9bfd" // 文本颜色
    },
    axisLine: {
      show: false // 去除轴线
    },
    splitLine: {
      lineStyle: {
        color: "#012f4a" // 分割线颜色
      }
    }
  }],
  series: [
    {
      name: "班级排名",
      type: "line",
      // true 可以让我们的折线显示带有弧度
      smooth: true,
      data: [0, 0, 0, 0, 0, 0]
    },
    {
      name: "专业排名",
      type: "line",
      smooth: true,
      data: [0, 0, 0, 0, 0, 0]
    }
  ]
});
onMounted(() => {
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

</script>

<style lang="less" scoped></style>